<template>
  <div v-loading="loading">
    <div class="content-title">
      <span>跟进记录内容模版设置</span>
      <el-button
        type="primary"
        class="rt"
        size="medium"
        @click="save">保存</el-button>
    </div>
    <div class="content-body">
      <div class="title">编辑内容模版</div>
      <el-input
        ref="textarea"
        v-model="content"
        autosize
        type="textarea"
        clearable
        resize="none"
        placeholder="请输入内容"
        />
    </div>
  </div>
</template>

<script>
import {
  crmGettingRecordContentAPI,
  crmSettingRecordContentEditAPI
} from '@/api/systemManagement/SystemCustomer'

export default {
  name: 'FollowLogTypeSet',

  components: {},

  data() {
    return {
      loading: false, // 展示加载中效果
      content: '',
      list: [] // 展示类型数据
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    /**
     * 获取详情
     */
    getDetail() {
      this.loading = true
      crmGettingRecordContentAPI()
        .then(res => {
          this.loading = false
          this.content = res.data[0];
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 保存操作
     */
    save() {
      const value = this.content;
      this.loading = true
      crmSettingRecordContentEditAPI({ value: value })
        .then(res => {
          this.loading = false
          this.$message.success('操作成功')
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-title {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.content-title > span {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  margin-left: 20px;
}

.content-body {
  height: calc(100% - 57px);
  padding: 30px;
  overflow-y: auto;
  .title{
    padding: 10px 0;
  }
}

/* 事项布局 */
.input-item {
  margin-bottom: 10px;

  .el-input {
    width: 300px;
  }

  .el-icon-remove {
    color: #ff6767;
    cursor: pointer;
    margin-left: 2px;
    display: none;
  }
}

.input-item:hover {
  .el-icon-remove {
    display: inline;
  }
}
</style>
